<template>
	<view class="content">
		<u-navbar :is-back="false" title="文档">
			<view slot="right">
				<image src="@/static/search.png" class="icon"></image>
				<image src="/static/add.png" class="icon" style="margin-right: 32rpx;margin-left: 40rpx;" @click="addOptionShow = !addOptionShow"></image>
			</view>
		</u-navbar>
		
		<view style="position: fixed;width: 750rpx;z-index: 10;padding: 0rpx 32rpx;background: #FFFFFF;">
		 <u-search placeholder="搜索" v-model="keyword" :show-action="false" :height="68"></u-search>
		 <u-tabs :list="tabList" style="margin-top: 18rpx;" :is-scroll="false" active-color="#0052D9" inactive-color="#858A99" :current="current" 
		 @change="change"></u-tabs>
		</view>
		
		<view style="width: 750rpx;height: 160rpx;"></view>
		
		<view class="allwrap">
		<view class="frame-item flexal" v-for="(item,index) in list" :key="index">
			<image :src="fileIcon(item.suffix)" style="width: 60rpx;height: 60rpx;"></image>
			<view style="margin-left: 32rpx;">
				<view class="frame-title">{{item.name}}</view>
				<view class="frame-time">{{item.time}}</view>
			</view>
		</view>
		</view>
		
		<!-- <movable-area style="pointer-events: none;height: 100%;width: 100%;position:absolute;left:0rpx;top:0rpx;">
		  	<movable-view direction="all" style="pointer-events: auto;height: 100rpx; width: 100rpx;z-index: 100;top: 75%;left: 600rpx;">
				<image src='/static/document/add.png' class="imgStyle" @click="show = !show"></image>
			</movable-view>
		</movable-area> -->
		<image src='/static/document/add.png' class="imgStyle" @click="show = !show"></image>
		
		<u-popup v-model="show" :mode="params.mode" :border-radius="params.borderRadius"
		:closeable="params.closeable" :close-icon-pos="params.closeIconPos" @close="close" >
			<view class="frame-pop">
				<view class="pop-item flexcolumnalign" v-for="(item,index) in optList" :key="index">
					<image :src="item.img" style="width: 100rpx;height: 100rpx;"></image>
					<text class="text">{{item.name}}</text>
				</view>
			</view>
		</u-popup>
		
		<!-- 电话提示滑动快 -->
		<movablearea1 :movaheight="movaheightAll" v-if="movableareaShow" @editMovaheightAll="editMovaheightAll" :movaTop="movaTopAll"></movablearea1>
		
		<u-tabbar v-model="tabs" :list="common_bottom" inactive-color="#858A99" active-color="#0052D9" :border-top="false" icon-size="56" height="120" bg-color="#fff"></u-tabbar>
	</view>
</template>
<script>
	export default {
		components: {
			
		},
		data() {
			return {
				common_bottom: getApp().globalData.common_bottom,
				tabList:[{
					name: '最近'
				}, {
					name: '目录'
				}],
				current:0,
				show:false,
				params:{
					mode:"bottom",
					borderRadius:24,
					closeable:false,
					closeIconPos:"top-left"
				},
				optList:[
					{
						name:'文档',
						img:'/static/document/work.png'
					},{
						name:'表格',
						img:'/static/document/xlx.png'
					},{
						name:'PPT',
						img:'/static/document/ppt.png'
					},{
						name:'PDF',
						img:'/static/document/pdf.png'
					},{
						name:'上传图片',
						img:'/static/document/img.png'
					},{
						name:'签收消息',
						img:'/static/document/sign.png'
					},
				],
				list:[
					{
						name:'2024年工作文档.docx',
						time:'最近访问于09:20',
						suffix:'docx'
					},{
						name:'2024年7月22日工作汇报文档.ppt',
						time:'最近访问于09:20',
						suffix:'ppt'
					},{
						name:'2024年工作文档.xls',
						time:'最近访问于09:20',
						suffix:'xlx'
					},{
						name:'2024年工作文档.pdf',
						time:'最近访问于09:20',
						suffix:'pdf'
					},{
						name:'2024年工作文档.jpg',
						time:'最近访问于09:20',
						suffix:'img'
					},
				]
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		onPullDownRefresh() {
			
		},
		methods: {
			// 文件消息图标
			fileIcon(suffix){
				let fileIcon = []
				fileIcon['ppt'] = '/static/message/ppt.png'
				fileIcon['pdf'] = '/static/message/pdf.png'
				fileIcon['docx'] = '/static/message/word.png'
				fileIcon['xlx'] = '/static/message/xlx.png'
				fileIcon['package'] = '/static/message/package.png'
				fileIcon['img'] = '/static/message/img.png'
				console.log('fileIcon',fileIcon)
				
				return fileIcon[suffix]
			},
			// 修改tabs
			change(index){
				this.current = index;
			}
		},
		onReachBottom() {
			
		},
	}
</script>
<style scoped lang="less">
	
	.content{
		
	}
	
	.frame-item{
		margin-top: 32rpx;
		width: 686rpx;
		background: #F9F9F9;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 32rpx;
	}
	
	.frame-title{
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
	}
	.frame-time{
		margin-top: 10rpx;
		font-weight: 400;
		font-size: 22rpx;
		color: #666666;
	}
	.imgStyle{
		width: 100rpx;
		height: 100rpx;
		z-index: 100;
		position: fixed;
		top: 75%;
		left: 620rpx;
		// box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0,0,0,0.16);
	}
	.frame-pop{
		display: flex;
		flex-wrap: wrap;
		padding-top: 18rpx;
		padding-bottom: 62rpx;
		.pop-item{
			margin-top: 41rpx;
			margin-left: 68rpx;
			
		}
		.text{
			font-weight: 400;
			font-size: 24rpx;
			color: #858585;
		}
	}
	
	.icon{
		width: 40rpx;
		height: 40rpx;
	}
</style>